<template>
  <div class="linkadd">
    <NavbarIndex msg="Welcome to Your Vue.js App" />
    <b-container>
      <div style="max-width: 500px;margin:auto">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="所属分类：" prop="type_id">
            <el-select v-model="ruleForm.type_id">
              <el-option v-for="item in types" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网站名称：" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="网站地址：" prop="url">
            <el-input v-model="ruleForm.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </b-container>
    <Footer msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import Footer from "@/components/Footer.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import {
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  Button,
  Select,
  Option,
  Form,
  FormItem,
  Message
} from "element-ui";
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Select);
Vue.use(Option);
Vue.use(Form);
Vue.use(FormItem);

Vue.prototype.$message = Message;
export default {
  name: "linkadd",
  components: {
    NavbarIndex,
    Footer
  },
  data () {
    return {
      ruleForm: {
        name: "",
        url: "",
        type_id: 88,
      },
      rules: {
        name: [
          { required: true, message: '请填写网站名称', trigger: 'blur' },
        ],
        url: [
          { required: true, message: "请填写网站网址", trigger: "blur" }
        ]
      },
      types: []
    };
  },
};
</script>

<style scoped>
</style>

